<!-- 用户页面 -->
<template>
  <div>
    <el-form :inline="true" :model="selectParam" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input
          v-model="selectParam.ename"
          @change="changPage()"
          placeholder="查询姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-select
          v-model="selectParam.deptno"
          placeholder="请选择(默认:所有)"
          @change="changPage"
        >
          <el-option :value="''">所有</el-option>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.dname"
            :value="item.deptno"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="el-icon-search"
          @click="onSubmit()"
          plain
          >查询</el-button
        >
        <el-button
          type="warning"
          class="el-icon-refresh"
          @click="resetForm()"
          plain
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="show()">添加员工</el-button>
    <el-button type="danger" @click="empDelete()">删除选中</el-button>
    <el-table
      :data="page.records"
      border
      style="width: 100%"
      @selection-change="(selection) => checkEmpChange(selection)"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="empno" label="编号" width="60"> </el-table-column>
      <el-table-column prop="ename" label="姓名" width="80"> </el-table-column>
      <el-table-column prop="sal" label="工资" width="80"> </el-table-column>
      <el-table-column prop="job" label="工作" width="160"> </el-table-column>

      <el-table-column prop="comm" label="奖金" width="90"> </el-table-column>
      <el-table-column
        prop="hireDate"
        label="入职日期"
        width="130"
        value-formate="yyyy-MM-dd"
        formate="yyyy-MM-dd"
        :formatter="dataFormat"
      >
        <!--   :formatter="dataFormat" -->
      </el-table-column>
      <el-table-column prop="dname" label="部门名称" width="180">
      </el-table-column>
      <el-table-column prop="mgrName" label="上司" width="100">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="empEdit(scope.row)">编辑</el-button>

          <el-popconfirm
            cancel-button-text="删除"
            @cancel="empDelete(scope.row)"
            cancel-button-type="primary"
            confirm-button-type="text"
            confirm-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确认删除吗?"
          >
            <el-button size="mini" type="danger" slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next,sizes,->,total"
      :page-sizes="pageSize"
      :page-size="7"
      @current-change="pageChange"
      @size-change="sizeChange"
      :total="page.total"
    >
    </el-pagination>

    <el-dialog title="添加员工" :visible.sync="dialogVisible" width="50%">
      <el-form
        :model="empForm"
        :rules="rules"
        ref="empForm"
        label-width="100px"
        class="demo-empForm"
      >
        <el-form-item label="姓名" prop="ename">
          <el-input v-model="empForm.ename"></el-input>
        </el-form-item>
        <el-form-item label="工作" prop="job">
          <el-input v-model="empForm.job"></el-input>
        </el-form-item>
        <el-form-item label="上司" prop="mgr">
          <el-input v-model="empForm.mgr"></el-input>
        </el-form-item>
        <el-form-item label="工资" prop="sal">
          <el-input v-model="empForm.sal"></el-input>
        </el-form-item>
        <el-form-item label="奖金" prop="comm">
          <el-input v-model="empForm.comm"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="deptno">
          <el-select v-model="empForm.deptno" placeholder="请选择部门">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.dname"
              :value="item.deptno"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" required>
          <el-date-picker
            v-model="empForm.hireDate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOrUpdateEmp">确定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //查询的参数
      selectParam: {},
      options: [],
      empList: [],
      empnolist: [],
      pageSize: [6, 10, 20],
      dialogVisible: false,
      page: { current: 1, size: 6 },
      empForm: {
        // empno: "",
        // ename: "admin",
        // sal: 1000.0,
        // mgr: 10,
        // job: "java程序员",
        // comm: 500,
        // deptno: "请选择",
        // hireDate: new Date(),
      },
      rules: {
        ename: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, message: "不得少于2个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    changPage() {
      this.page.current = 1;
    },
    //重置查询元素
    resetForm() {
      this.selectParam = {};
      this.get();
    },
    onSubmit() {
      this.get();
    },
    pageChange(current) {
      this.page.current = current;
      this.get();
    },
    sizeChange(size) {
      this.page.size = size;
      this.get();
    },
    //表单行元素的方法参数
    dataFormat(row, colum, cellValue, index) {
      return cellValue.substring(0, 10);
    },
    show() {
      this.dialogVisible = true;
      this.empForm.empno = null;
      this.empForm = {};
      this.getDname();
    },
    //回显修改的数据
    empEdit(emp) {
      this.getDname();
      var empno = emp.empno;
      this.http
        .request({
          url: "emp/select/" + empno,
          method: "get",
        })
        .then(({ data }) => {
          if (data.code == 1) {
            this.empForm = data.data;
            // console.log(this.empForm);
            // console.log(data.data);
            this.dialogVisible = true;
          } else {
            // this.$message({
            //   message: data.msg,
            //   type: "error",
            // });
          }
        });
    },
    checkEmpChange(selection) {
      this.empnolist = [];
      for (var s in selection) {
        this.empnolist.push(selection[s].empno);
      }
    },
    empDelete(one) {
      console.log(one);
      if (one != null) {
        //传了参数,就是单个删除
        //清除勾选的内容
        this.empnolist = [];
        this.empnolist.push(one.empno);
        this.deletEmp();
      } else {
        this.$confirm("确认删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.deletEmp();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          });
      }
    },
    deletEmp() {
      this.http
        .request({
          url: "emp/del",
          method: "delete",
          data: this.empnolist,
        })
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: result.data.msg,
              type: "success",
            });
            this.get();
          } else {
            // this.$message({
            //   message: result.data.msg,
            //   type: "error",
            // });
          }
        });
    },
    addOrUpdateEmp() {
      if (this.empForm.empno != null) {
        //说明这是一个修改功能
        var re = "info";
      } else {
        //这是一个添加功能
        var re = "save";
      }
      var emp = this.empForm;
      this.http
        .request({
          url: "emp/" + re,
          method: "post",
          data: emp,
        })
        .then(({ data }) => {
          if (data.code == 1) {
            this.$message({
              message: data.msg,
              type: "success",
            });
            this.dialogVisible = false;
            this.get();
          } else {
            this.$message({
              message: data.msg,
              type: "warning",
            });
          }
        });
    },
    //获取部门名称
    getDname() {
      this.http
        .request({
          url: "dept/list",
          method: "get",
        })
        .then(({ data }) => {
          if (data.code == 1) {
            this.options = data.data;
          }
        });
    },
    //获取员工列表数据
    get() {
      //1.发送请求获取数据 需要安装vue-this.http插件
      this.http
        .request({
          url: "emp/page",
          method: "post",
          data: {
            page: JSON.stringify(this.page),
            emp: JSON.stringify(this.selectParam),
          },
        })
        .then(({ data }) => {
          if (data.code == 1) {
            //2.将数据绑定在vue对象的属性中//3.视图层显示数据
            this.page = data.data;
          } else {
            this.$message({
              message: data.msg,
              type: "warning",
            });
          }
        });
    },
  },

  //组件生命周期的初始化方法 类似之前的页面加载的方法
  mounted() {
    this.get();
    this.getDname();
  },
};
</script>

<style>
</style>
